<template>
  <div class="fund-info list-table">
    <div class="fund-info-flex">
      <div class="fund-info-left">
        <el-descriptions v-loading="initLoading" class="mb15" :column="2" border>
          <template slot="title">
            <span class="fund-tit">{{ $t('基金概览') }}</span>
          </template>
          <el-descriptions-item :label="$t('基金名称')" label-class-name="style-label" content-class-name="style-content">
            <router-link
              target="_blank"
              :to="{ path:'/fund/fundBasehome',query:{ id: $route.query.id, fundType: $route.query.fundType }}"
              class="link_a"
            >{{ fundForm.fundFullName }}</router-link>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金简称')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.fundName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('注册地-详细地址')" :span="2" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.registeredAddress || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('币种')" label-class-name="style-label" content-class-name="style-content">
            {{ currencyFormat(fundForm) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('注册省市')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.provinceRegisteredName }} {{ fundForm.cityRegisteredName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金认缴规模') + $t('金额单位')" label-class-name="style-label" content-class-name="style-content">
            {{ moneyFormat(fundForm.subscriptionScale, 'w') || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金实缴规模') + $t('金额单位')" label-class-name="style-label" content-class-name="style-content">
            {{ moneyFormat(fundForm.paidInScale, 'w') || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金在投金额') + $t('金额单位')" label-class-name="style-label" content-class-name="style-content">
            {{ moneyFormat(fundForm.reinvestmentAmount, 'w') || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金最新估值') + $t('金额单位')" label-class-name="style-label" content-class-name="style-content">
            {{ moneyFormat(fundForm.atestValuation, 'w') || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('投资期起始日')" label-class-name="style-label" content-class-name="style-content">
            {{ parseTime(fundForm.investmentPeriodStart) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('投资期到期日')" label-class-name="style-label" content-class-name="style-content">
            {{ parseTime(fundForm.investmentPeriodExpiry) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('退出期起始日')" label-class-name="style-label" content-class-name="style-content">
            {{ parseTime(fundForm.exitPeriodStart) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('退出期到期日')" label-class-name="style-label" content-class-name="style-content">
            {{ parseTime(fundForm.exitPeriodEnd) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金投资期(年)')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.investmentPeriod || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金退出期(年)')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.withdrawalPeriod || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('基金延长期(年)')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.extension || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('管理公司')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.managerName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('直接投资退出项目数量')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.numberExitDirect || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('子基金投资退出项目数量')" label-class-name="style-label" content-class-name="style-content">
            {{ fundForm.numberExitSubFund || '-' }}
          </el-descriptions-item>
        </el-descriptions>
        <div v-loading="subFundLoading" class="mb15">
          <div class="el-descriptions__header">
            <span class="fund-tit">{{ $t('投资信息-子基金信息') }}</span>
          </div>
          <el-table border :data="subFundTable" class="header-none">
            <el-table-column prop="investNum" :label="$t('投资基金数量')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.investNum) || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalSubscription" :label="$t('认缴出资总额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalSubscription, 'w') || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalAmountPaid" :label="$t('实缴出资总额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalAmountPaid, 'w') || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="subscriptionRatio" :label="$t('缴款比例') + $t('(%)')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.subscriptionRatio) || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalPayment" :label="$t('回款总额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalPayment, 'w') || '-' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-loading="dealLoading" class="mb15">
          <div class="el-descriptions__header">
            <span class="fund-tit">{{ $t('投资信息-直投项目信息') }}</span>
          </div>
          <el-table border :data="dealTable" class="header-none">
            <el-table-column prop="investNum" :label="$t('投资项目数量')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.investNum) || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalSubscription" :label="$t('签约金额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalSubscription, 'w') || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalAmountPaid" :label="$t('划款金额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalAmountPaid, 'w') || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="subscriptionRatio" :label="$t('缴款比例') + $t('(%)')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.subscriptionRatio) || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="totalPayment" :label="$t('回款总额') + $t('金额单位')">
              <template slot-scope="scope">
                {{ moneyFormat(scope.row.totalPayment, 'w') || '-' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-loading="echartLoading" class="fund-info-right">
        <div class="border mb15">
          <div class="el-descriptions__header">
            <span class="fund-tit">{{ $t('子基金所投行业分布') }}</span>
          </div>
          <!-- <pie v-if="fundEchartsHY.length > 0" id="cahr1" ref="chart" :m2r2data="fundEchartsHY" height="calc(100% - 35px)" :is-legend="true" rose-type="radius" /> -->
          <pie v-if="fundEchartsHY.datas.length > 0" :chart-data="fundEchartsHY" height="calc(100% - 35px)" />
        </div>
        <div class="border mb15">
          <div class="el-descriptions__header">
            <span class="fund-tit">{{ $t('直投项目行业分布') }}</span>
          </div>
          <pie v-if="dealEchartsData.datas.length > 0" :chart-data="dealEchartsData" height="calc(100% - 35px)" />
        </div>
        <div class="border mb15">
          <div class="el-descriptions__header">
            <span class="fund-tit">{{ $t('子基金投资项目阶段') }}</span>
          </div>
          <pie v-if="fundEchartsJD.datas.length > 0" :chart-data="fundEchartsJD" height="calc(100% - 35px)" />
        </div>
      </div>
    </div>
    <div v-loading="investorLoading">
      <div class="el-descriptions__header">
        <span class="fund-tit">{{ $t('出资人信息') }}</span>
      </div>
      <el-table border :data="investorTable" class="header-none">
        <el-table-column type="index" :label="$t('序号')" />
        <el-table-column prop="investorName" :label="$t('出资人')" />
        <el-table-column prop="dateInvestmentEstimate" :label="$t('认缴时间')" />
        <el-table-column prop="amountInvestmentEstimate" :label="$t('认缴金额') + $t('金额单位')" />
        <el-table-column prop="subscriptionRatio" :label="$t('认缴比例(%)')" />
        <el-table-column prop="amountInvestmentFact" :label="$t('累计实缴总额') + $t('金额单位')" />
        <el-table-column prop="paymentProgress" :label="$t('缴款进度(%)')" />
        <el-table-column prop="investmentSignTime" :label="$t('合伙协议签订时间')" />
        <el-table-column prop="irr" :label="$t('最新IRR')" />
      </el-table>
    </div>
  </div>
</template>
<script>
import pie from '@/views/chart/pieChart'
import {
  getFundBaseFofToOverview,
  fofSubFundInfo,
  fofDirectInvestmentInfo,
  fofInvestorList, fofOverviewChart
} from '@/api/fund/fundBase'
export default {
  name: 'FundInfo',
  components: {
    pie
  },
  data() {
    return {
      initLoading: false,
      subFundLoading: false,
      dealLoading: false,
      echartLoading: false,
      investorLoading: false,
      fundForm: {},
      subFundTable: [],
      dealTable: [],
      investorTable: [],
      currencyOptions: [],
      fundEchartsHY: {
        legend: true,
        datas: []
      },
      dealEchartsData: {
        legend: true,
        datas: []
      },
      fundEchartsJD: {
        legend: true,
        datas: []
      }
    }
  },
  created() {
    this.getDicts('currency').then(response => {
      this.currencyOptions = response.data
    })
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      // 概览
      this.loadInfo()
      this.loadSubFundInfo()
      this.loadDealInfo()
      this.loadEchartsInfo()
      this.loadInvestorList()
    },
    // 加载进本信息
    loadInfo() {
      this.initLoading = true
      getFundBaseFofToOverview(this.$route.query.id).then(res => {
        this.fundForm = res.data
        this.initLoading = false
      })
    },
    // 加载自基金信息
    loadSubFundInfo() {
      this.subFundLoading = true
      fofSubFundInfo(this.$route.query.id).then(res => {
        this.subFundTable = res.data
        this.subFundLoading = false
      })
    },
    // 加载直投信息
    loadDealInfo() {
      this.dealLoading = true
      fofDirectInvestmentInfo(this.$route.query.id).then(res => {
        this.dealTable = res.data
        this.dealLoading = false
      })
    },
    // 加载echarts
    loadEchartsInfo() {
      this.echartLoading = true
      fofOverviewChart(this.$route.query.id).then(res => {
        this.fundEchartsHY.datas = res.data.fundEchartsHY
        this.dealEchartsData.datas = res.data.dealEchartsData
        this.fundEchartsJD.datas = res.data.fundEchartsJD
        this.echartLoading = false
      })
    },
    // 加载出资人
    loadInvestorList() {
      this.investorLoading = true
      fofInvestorList(this.$route.query.id).then(res => {
        this.investorTable = res.data
        this.investorLoading = false
      })
    },
    // 注册资本币种字典翻译
    currencyFormat(row) {
      return this.selectDictLabel(this.currencyOptions, row.currency)
    }
  }
}
</script>
<style lang="scss" scoped>
.fund-info{
  &-flex{
    display: flex;
    column-gap: 15px;
  }
  &-left{
    width: calc(100% - 400px);
  }
  &-right{
    width: 400px;
    max-width: 400px;
    .border{
      border: 1px solid #e6ebf5;
      height: calc(100% / 3 - 15px);
      .el-descriptions__header{
        border: 0;
        border-bottom: 1px solid #e6ebf5;
      }
    }
  }
}
.mb15{
  margin-bottom: 15px;
}
/deep/ .header-none th{
  background-color: transparent!important;;
}
/deep/ .header-style th{
  background-color: #ebf5ff!important;;
}
/deep/.el-descriptions__header{
  margin-bottom: 0;
  padding: 8px 10px;
  border: 1px solid #e6ebf5;
  border-bottom: 0;
  background: #ebf5ff;
  .fund-tit{
    font-size: 14px;
    color: #0073ff;
    font-weight: bold;
  }
}
/deep/.el-descriptions {
  .is-bordered {
    th{
      width: 17%;
    }
  }
}
/deep/.style-label{
  background: transparent;
  color: rgba(0,0,0,1);
}
/deep/.style-content{
  color: rgba(0,0,0,.65);
}
</style>
